<template>
  <div class="loans">
    <div class="reminder">注：待学员完成报名流程或约完车后才可进行投诉！</div>
    <div class="loans-basic service-complaint">
      <p>
        类型：
        <img
          class="requiredFields"
          src="../../../assets/images/bitian.png"
          alt
        />
      </p>
      <select v-model="genre" class="loans-type">
        <option value="1">投诉</option>
        <option value="2">留言</option>
      </select>
    </div>
    <!-- 投诉项目 -->
    <div class="loans-basic service-complaint">
      <p>
        投诉项目
        <img
          class="requiredFields"
          src="../../../assets/images/bitian.png"
          alt
        />
      </p>
      <select v-model="project" class="loans-type">
        <option value="1">服务质量</option>
        <option value="2">服务态度</option>
        <option value="3">收费问题</option>
        <option value="4">其它</option>
      </select>
    </div>

    <!-- 投诉人 -->
    <div class="loans-basic service-complaint">
      <p>
        教练/驾校
        <img
          class="requiredFields"
          src="../../../assets/images/bitian.png"
          alt
        />
      </p>
      <select v-model="protestant" @blur="targetComplaint" class="loans-type">
        <option value="1">驾校</option>
        <option value="2">教练</option>
      </select>
    </div>

    <!-- 投诉教练或者驾校 -->
    <div class="loans-basic service-complaint">
      <p>
        投诉对象
        <img
          class="requiredFields"
          src="../../../assets/images/bitian.png"
          alt
        />
      </p>
      <select v-model="target" class="loans-type">
        <option
          v-for="(item, index) in CardList"
          :key="index"
          :value="item.id"
          >{{ item.name }}</option
        >
      </select>
    </div>

    <van-cell-group>
      <van-field v-model="phone" placeholder="请输入联系电话">
        <template #label>
          <div>联系电话：</div>
          <img
            class="requiredFields"
            src="../../../assets/images/bitian.png"
            alt
          />
        </template>
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="title" placeholder="请输入标题">
        <template #label>
          <div>标题：</div>
          <img
            class="requiredFields"
            src="../../../assets/images/bitian.png"
            alt
          />
        </template>
      </van-field>
    </van-cell-group>
    <div class="cp-leave">
      <van-field
        v-model="message"
        rows="2"
        autosize
        maxlength="300"
        show-word-limit
        type="textarea"
        placeholder="请输入留言"
      >
        <template #label>
          <div>留言：</div>
          <img
            class="requiredFields"
            src="../../../assets/images/bitian.png"
            alt
          />
        </template>
      </van-field>
    </div>
    <div @click="submit" class="loans-btn">提交</div>
  </div>
</template>

<script>
import {
  ServiceComplaint,
  drivingSchool,
  instructor,
  present
} from "../../../assets/js/api/user";
import { Toast, Dialog } from "vant";
export default {
  naem: "Complaint",
  data() {
    return {
      genre: "2", // 类型
      project: "1", // 投诉项目
      protestant: "2", // 申诉人
      target: "", // 投诉对象
      phone: "", // 联系电话
      title: "", // 标题
      message: "", // 留言
      CardList: [] // 教练列表
    };
  },

  created() {
    // 让页面加载的时候默认的加载教练列表
    ServiceComplaint().then(res => {
      // console.log(res);
      this.CardList = res.data;
    });
  },

  methods: {
    // 提交
    submit() {
      // 默认加载教练
      if (this.genre == "") {
        Toast("请选择投诉类型");
        return;
      }
      if (this.project == "") {
        Toast("请选择投诉项目");
        return;
      }
      if (this.protestant == "") {
        Toast("请选择投诉教练/驾校");
        return;
      }
      if (this.target == "") {
        Toast("请选择投诉对象");
        return;
      }
      if (this.phone == "") {
        Toast("投诉电话不能为空");
        return;
      }
      if (this.title == "") {
        Toast("请输入投诉标题");
        return;
      }
      if (this.message == "") {
        Toast("请输入留言");
        return;
      }

      // if (
      //   this.genre == "" ||
      //   this.project == "" ||
      //   this.protestant == "" ||
      //   this.target == "" ||
      //   this.phone == "" ||
      //   this.title == "" ||
      //   this.message == ""
      // ) {
      //   Toast("请完善信息");
      //   return;
      // }

      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        Toast("手机号格式错误");
        return;
      }

      if (this.protestant === "2") {
        let obj = {
          tsstatus: this.genre,
          tsxm: this.project,
          tsdx: this.protestant,
          drillId: this.target,
          phone: this.phone,
          tstitle: this.title,
          remark: this.message
        };
        present(obj).then(res => {
          if (res.code == "0") {
            Dialog.alert({
              message: "投诉成功"
            }).then(() => {
              // on close
              this.target = "";
              this.phone = "";
              this.title = ""; // 标题
              this.message = ""; // 留言
            });
          } else {
            Toast.fail("网络错误，请稍后再试");
          }
        });
      } else {
        let obj = {
          tsstatus: this.genre,
          tsxm: this.project,
          tsdx: this.protestant,
          jgbh: this.target,
          phone: this.phone,
          tstitle: this.title,
          remark: this.message
        };

        present(obj).then(res => {
          if (res.code == "0") {
            Toast.success("投诉成功");
            this.target = "";
            this.phone = "";
            this.title = ""; // 标题
            this.message = ""; // 留言
          } else {
            Toast.fail("网络错误，请稍后再试");
          }
        });
      }
    },

    targetComplaint() {
      if (this.protestant === "2") {
        instructor().then(res => {
          // console.log(res.data);
          this.CardList = res.data;
        });
      } else {
        drivingSchool().then(res => {
          // console.log(res.data);
          this.CardList = res.data;
        });
      }
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style></style>
